<template>
	<view class="add-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<u-form-item class="form-item" required label="标题" prop="title">
					<!-- block -->
					<u-input v-model="form.title" type="text" placeholder="请输入标题" />
				</u-form-item>
				<u-form-item class="form-item" required label="提出人" prop="submitBy">
					<!-- block -->
					<u-input v-model="form.submitBy" type="text" placeholder="请输入提出人" />
				</u-form-item>
				<u-form-item class="form-item" required label="身份证号" prop="idCard">
					<!-- block -->
					<u-input v-model="form.idCard" type="text" placeholder="请输入身份证号" />
				</u-form-item>
				<u-form-item class="form-item" required label="手机号" prop="phone">
					<!-- block -->
					<u-input v-model="form.phone" type="text" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item class="form-item" required label=" " label-position="top" v-if="phone != form.phone">
					<u-input v-model="form.smsCode" input-align="left" type="number" placeholder="请输入验证码" />
					<template v-slot:right>
						<view class="code" @click="getCode">{{ codeTips }}</view>
						<!-- <u-button class="code" type="error" size="mini" @click="getCode">{{ codeTips }}</u-button> -->
					</template>
					<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
				</u-form-item>

				<u-form-item class="form-item" label="单位">
					<!-- block -->
					<u-input v-model="form.unit" type="text" placeholder="请输入单位" />
				</u-form-item>
				<u-form-item class="form-item" label="邮箱">
					<!-- block -->
					<u-input v-model="form.email" type="text" placeholder="请输入邮箱" />
				</u-form-item>

				<u-form-item class="form-item border-none" required label=" " label-position="top" prop="content">
					<!-- block -->
					<u-input input-align="left" v-model="form.content" type="textarea" placeholder="请输入正文内容" :clearable="false" :height="160" :maxlength="-1" />
				</u-form-item>

				<u-form-item class="form-item" label=" " label-position="top">
					<!-- block -->
					<uni-file-upload :list.sync="fileList" :type="['all', 'image', 'audio']" :limit="10"></uni-file-upload>
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm"><u-button class="form-btn" type="error" @click="confirm">提交</u-button></view>

		<!-- <uni-slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></uni-slider-verify> -->
	</view>
</template>

<script>
// import uniSliderVerify from '@/components/uni-slider-verify/slider-verify.vue';
import uniFileUpload from '@/components/uni-uploader.vue';
import { mapState } from 'vuex';
export default {
	components: {
		// uniSliderVerify,
		uniFileUpload
	},
	data() {
		return {
			id: '',
			navItem: 0,
			title: '网上信访',
			sliderVerifyFLag: false,
			phone: '',
			codeTips: '获取验证码',

			fileList: [],

			form: {
				id: '',
				title: '',
				idCard: '',
				phone: '',
				smsCode: '',
				unit: '',
				email: '',
				submitBy: '',
				content: ''
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号不正确',
						trigger: 'change'
					}
				],
				submitBy: [
					{
						required: true,
						message: '请输入提交人',
						trigger: 'change'
					}
				],
				idCard: [
					{
						required: true,
						message: '请输入身份证',
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						},
						message: '身份证不正确',
						trigger: 'change'
					}
				],
				content: [
					{
						required: true,
						message: '请输入正文内容',
						trigger: 'change'
					}
				]
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.phone = this.userInfo.sysUser.phone;

				this.form.createBy = this.userInfo.sysUser.id;
				this.form.phone = this.userInfo.sysUser.phone;
			} else {
				this.$logout();
			}
		},
		verifyResult(res) {
			if (res) {
				this.sliderVerifyFLag = false;
			} else {
				// 校验失败,点击关闭按钮
				console.log('失败', res);
				uni.navigateBack();
			}
		},
		codeChange(text) {
			this.codeTips = text;
		},
		getCode() {
			let data = {
				clientCode: this.clientCode
			};
			if (this.$refs.uCode.canGetCode) {
				this.$request('/sms/code?tel=' + this.form.phone, data, {
					load: true
				}).then((res) => {
					this.$msg('验证码已发送');
					this.$refs.uCode.start();
				});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		confirm() {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					return false;
				} else {
					if (this.id) {
						this.form.id = this.id;
					}

					if (this.phone == this.form.phone) {
						if (!this.form.smsCode) {
							this.$msg('请输入验证码');
							return false;
						}
						this.$request('/sms/checkCode', {
							tel: this.form.phone,
							smsCode: this.form.smsCode
						}).then((res) => {
							this.sendContent();
						});
					} else {
						this.sendContent();
					}
				}
			});
		},
		sendContent() {
			let data = {};
			data = {
				userId: this.userId,
				clientCode: this.clientCode,
				fileList: this.fileList,
				...this.form
			};

			if (data.content) {
				data.content = `<p style="white-space: pre-line;">${data.content}</p>`;
			}

			this.$request('/wangshangxinfang/petition-letter/add', data, {
				load: true
			}).then((res) => {
				uni.navigateTo({
					url: '/pagesB/petition/back?code=' + res.msg
				});
				// this.$msg('提交成功');
				// setTimeout(() => {
				// 	let pre = this.$prePage();
				// 	if (pre && pre.loadData) {
				// 		pre.loadData('refresh');
				// 	}
				// 	uni.navigateBack();
				// }, 500);
			});
		}
	}
};
</script>

<style lang="scss">
.add-view {
	background-color: #fff;
}

.form-box {
	border-top: 20rpx solid $u-border-color;

	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid $u-border-color;

		&.border-none {
			border-bottom: 0;
		}
	}

	.code {
		padding: 0 16rpx;
		color: #d0021b;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
